<!-- eslint-disable vue/multi-word-component-names -->
<!-- eslint-disable vue/valid-template-root -->
<template>
  <div
    class="flex h-full justify-center flex-wrap content-center relative bg-[url('@/assets/images/bg-left.jpg')]"
  >
    <div class="p-3 rounded-md shadow-md bg-gradient-to-r from-blue-400">
      <div class="w-96 p-4 rounded-md shadow-md bg-white">
        <div class="logo w-full h-20 flex justify-center content-center">
          <img class="h-14" src="@/assets/images/logo.svg" alt="">
        </div>
        <n-form ref="formRef" :label-width="80" :model="body" label-placement="left">
          <n-form-item path="loginName">
            <n-input v-model:value="body.loginName" placeholder="登录名" />
          </n-form-item>
          <n-form-item path="password">
            <n-input v-model:value="body.password" placeholder="密码" />
          </n-form-item>
          <n-form-item>
            <n-button class="w-full" type="primary" @click="loginSubmit"> 登录 </n-button>
          </n-form-item>
        </n-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import router from '@/router';
import useUserStore from '@/stores/user/userStore';
import type { FormInst } from 'naive-ui'
import { ref } from 'vue'

interface FormBody {
  loginName: string
  password: string
}

const formRef = ref<FormInst | null>()

const body = ref<FormBody>({
  loginName: '',
  password: ''
})
const userStore = useUserStore();

const loginSubmit = async () => {
  userStore.loginName = body.value.loginName;
  router.push({path: '/'});
}
</script>
